<template>
    <el-container class="sys_parameter" >
        <el-main>
            <el-card class="box-card">
                <el-form ref="wxOpenSettingForm" :rules="rules" :model="wxOpenSettingForm" label-width="150px" >
                    <el-form-item label="集成微信登录" prop="login_wx">
                        <el-radio-group v-model="wxOpenSettingForm.login_wx" :onchange="toggleLoginWx()">
                            <el-radio-button label="1">启用</el-radio-button>
                            <el-radio-button label="0">关闭</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="应用名称" prop="wechat_open_app_name" v-if="wxOpenSettingForm.login_wx==1">
                        <el-input v-model="wxOpenSettingForm.wechat_open_app_name" autocomplete="off" placeholder="请输入应用名称"clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="应用AppId" prop="wx_open_appid" v-if="wxOpenSettingForm.login_wx==1">
                        <el-input v-model="wxOpenSettingForm.wx_open_appid" autocomplete="off" placeholder="请输入应用AppId"clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="应用AppSecret" prop="wx_open_app_secret" v-if="wxOpenSettingForm.login_wx==1">
                        <el-input v-model="wxOpenSettingForm.wx_open_app_secret" autocomplete="off" placeholder="请输入应用AppSecret"clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="微信扫码成功回调地址" prop="wx_open_callback_url" v-if="wxOpenSettingForm.login_wx==1">
                        <el-input v-model="wxOpenSettingForm.wx_open_callback_url" autocomplete="off" placeholder="请输入微信扫码成功回调地址"clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="微信扫码成功跳转地址" prop="wx_open_redirect_url" v-if="wxOpenSettingForm.login_wx==1">
                        <el-input v-model="wxOpenSettingForm.wx_open_redirect_url" autocomplete="off" placeholder="请输入微信扫码成功跳转地址"clearable ></el-input>
                    </el-form-item>
                    <div>
                        <el-button type="primary" @click="saveWxOpensetting" v-btnLoading style="margin-left: 150px;width: 100px;">确 定</el-button>
                    </div>
                </el-form>
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
    import sysSettingApi from "@common/api/system/sysSettingApi";
    import constants from "@common/api/constants";

    export default {
        name: "SysCommonParameter",
        data () {
            let $this = this;
            return {
                rules: {
                    name: [
                        {required: true, message: '请输入参数名称', trigger: 'blur'},
                        {pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,32}$/, message: '最大 32 位大小写英文、数字或者其它地区语言字符，不能包含特殊字符'}
                    ],
                    value: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        //目前只兼容中文、大小写英文、数字
                        {pattern: /^[A-Za-z0-9+-_.]{1,32}$/, message: '最大32位字符，大小写英文、数字或者以下特殊字符（+-_.），不能包含特殊字符'}
                    ],
                },
                //弹窗option
                dialogOption: {
                    visible: false,
                },
                //编辑新增的form数据
                wxOpenSettingForm: {code:constants.CODE_WEIXIN_OPEN,login_wx:0},
                searchValue: '',
            }
        },
        mounted () {
            this.getWeixinOpenSetting();
        },
        methods: {
            getWeixinOpenSetting () {
                let $this = this;
                let queryData = {code:constants.CODE_WEIXIN_OPEN}
                sysSettingApi.getSysSettingByCodeOwnerId(queryData, result => {
                    if (result.data) {
                        if (result.data.json){
                            $this.wxOpenSettingForm = JSON.parse(result.data.json);
                        }
                    }
                })
            },
            toggleLoginWx(){
                console.log(this.wxOpenSettingForm.login_wx);
            },
            //保存/更新微信开放平台设置
            saveWxOpensetting () {
                let $this = this;
                $this.$refs['wxOpenSettingForm'].validate(valid => {
                    if (valid) {
                        let setting = $.extend({},$this.wxOpenSettingForm,{json:JSON.stringify($this.wxOpenSettingForm)});
                        sysSettingApi.saveSysSetting(setting, () => {
                            $this.$message.success('保存成功！');
                        })
                    } else {
                        return false;
                    }
                });

            },
        },
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .sys_parameter {
        height: 100%;

        .buttons {
            margin: 0 0 10px 0;
        }
    }
</style>
